<template>
  <page-meta :root-font-size="$rootFontSize"></page-meta>
  <view>
    <u-navbar
      title="提现账户"
      leftIcon="arrow-left"
      leftIconSize="40"
      leftIconColor="#000000"
      @leftClick="goBack"
      :placeholder="true"
      :autoBack="false"
    >
    </u-navbar>
    <u-loading-page
      :loading="isLoading"
      loading-mode="spinner"
      icon-size="56rpx"
      loading-text="拼命加载中..."
      fontSize="28rpx"
      class="z-50 top-0"
    ></u-loading-page>
    <!--提现账户-->
    <view class="mx-4">
      <view v-if="isShow">
        <u--input
          placeholder="收款人姓名"
          clearable
          v-model="info.payeeName"
          border="bottom"
          maxlength="4"
          class="py-2.5 text-base text-dark"
        ></u--input>
        <view class="text-xs text-gray mt-2.5">姓名确认后，不可修改</view>
        <view class="mx-10 mt-14 pb-10">
          <view
            class="w-full rounded-full leading-10 text-base h-10 text-center text-white bg-box-shadow"
            :class="info.payeeName == '' ? 'bg-medium' : 'bg-primary'"
            @click="submitTo"
            >确定</view
          >
        </view>
      </view>
      <!--支付宝/微信/银行卡 => 数据-->
      <view class="pb-10" v-else>
        <view
          class="text-xl text-dark font-semibold py-2 leading-10 border-b-gray"
          >{{ info.payeeName }}</view
        >
        <!--支付宝收款账户-->
        <view class="border-b-gray">
          <view class="flex justify-between h-12 items-center">
            <view class="text-base text-dark">支付宝</view>
            <view
              class="flex justify-center items-center"
              @click="isAlipay = false"
              v-if="isAlipay"
            >
              <view
                class="bg-red-500 w-1 h-1 rounded-full mr-1.5"
                v-if="
                  info.alipayAccountStatus == 3 || info.alipayCodeStatus == 3
                "
              ></view>
              <text class="text-light text-xs mr-1">{{
                info.alipayAccountStatus == 0
                  ? '待完善'
                  : info.alipayAccountStatus == 3 || info.alipayCodeStatus == 3
                  ? '待修改'
                  : info.alipayAccountStatus == 1 || info.alipayCodeStatus == 1
                  ? '待审核'
                  : info.alipayAccountStatus == 2 && info.alipayCodeStatus == 2
                  ? '已完善'
                  : ''
              }}</text
              ><u-icon name="arrow-right" color="#999999" size="32"></u-icon
            ></view>
            <view
              class="flex justify-center items-center"
              @click="isAlipay = true"
              v-else
            >
              <view
                class="bg-red-500 w-1 h-1 rounded-full mr-1.5"
                v-if="
                  info.alipayAccountStatus == 3 || info.alipayCodeStatus == 3
                "
              ></view>
              <text class="text-light text-xs mr-1">{{
                info.alipayAccountStatus == 0
                  ? '待完善'
                  : info.alipayAccountStatus == 3 || info.alipayCodeStatus == 3
                  ? '待修改'
                  : info.alipayAccountStatus == 1 || info.alipayCodeStatus == 1
                  ? '待审核'
                  : info.alipayAccountStatus == 2 && info.alipayCodeStatus == 2
                  ? '已完善'
                  : ''
              }}</text
              ><u-icon name="arrow-down" color="#999999" size="32"></u-icon
            ></view>
          </view>
          <view v-if="!isAlipay">
            <view
              v-if="
                info.alipayAccountStatus == 0 || info.alipayAccountStatus == 3
              "
            >
              <view
                class="flex items-center mb-2.5"
                v-if="info.alipayAccountStatus == 3"
                ><u-icon
                  name="/static/icons/icon-message-tip.png"
                  size="24"
                ></u-icon
                ><text class="text-xs text-light ml-1.5">{{
                  info.alipayAccountRemark
                }}</text></view
              >
              <u--input
                placeholder="支付宝账号"
                clearable
                v-model="info.alipayAccount"
                border="bottom"
                @input="changeDisabled"
                class="py-2.5 text-base text-dark"
              ></u--input>
            </view>
            <view class="text-base text-dark pb-2.5 border-b-gray" v-else>
              {{ info.alipayAccount }}
            </view>
            <view class="text-sm text-dark leading-10">支付宝收款码</view>
            <view
              v-if="info.alipayCodeStatus == 0 || info.alipayCodeStatus == 3"
            >
              <view
                class="flex items-center mb-2.5"
                v-if="info.alipayCodeStatus == 3"
                ><u-icon
                  name="/static/icons/icon-message-tip.png"
                  size="24"
                ></u-icon
                ><text class="text-xs text-light ml-1.5">{{
                  info.alipayCodeRemark
                }}</text></view
              >
              <view
                class="flex justify-center mb-5"
                @click="uploadPhoto('alipay')"
                v-if="info.alipayCodeStatus == 0 && unAlipayPhoto"
              >
                <image
                  class="w-32 h-32"
                  src="/static/icons/icon-photo-add.png"
                />
              </view>
              <view
                class="flex justify-center mb-5 relative"
                v-else
                @click="uploadPhoto('alipay')"
              >
                <view
                  class="text-center text-white text-sm w-32 h-10 leading-10 button-bg absolute bottom-0 z-10 rounded-b-xl"
                  >更换</view
                >
                <image
                  class="w-32 h-32 rounded-xl"
                  :src="info.alipayCodeUrlHttp"
                />
              </view>
            </view>
            <view class="flex justify-center mb-5" v-else>
              <image
                class="w-32 h-32 rounded-xl"
                :src="info.alipayCodeUrlHttp"
              />
            </view>
          </view>
        </view>
        <!--支付宝收款账户-->
        <!--微信收款账户-->
        <view class="border-b-gray">
          <view class="flex justify-between h-12 items-center">
            <view class="text-base text-dark">微信</view>
            <view
              class="flex justify-center items-center"
              @click="isWechat = false"
              v-if="isWechat"
            >
              <view
                class="bg-red-500 w-1 h-1 rounded-full mr-1.5"
                v-if="info.wechatStatus == 3"
              ></view>
              <text class="text-light text-xs mx-1">{{
                info.wechatStatus == 0
                  ? '待完善'
                  : info.wechatStatus == 3
                  ? '待修改'
                  : info.wechatStatus == 1
                  ? '待审核'
                  : info.wechatStatus == 2
                  ? '已完善'
                  : ''
              }}</text
              ><u-icon name="arrow-right" color="#999999" size="32"></u-icon
            ></view>
            <view
              class="flex justify-center items-center"
              @click="isWechat = true"
              v-else
            >
              <view
                class="bg-red-500 w-1 h-1 rounded-full mr-1.5"
                v-if="info.wechatStatus == 3"
              ></view>
              <text class="text-light text-xs mx-1">{{
                info.wechatStatus == 0
                  ? '待完善'
                  : info.wechatStatus == 3
                  ? '待修改'
                  : info.wechatStatus == 1
                  ? '待审核'
                  : info.wechatStatus == 2
                  ? '已完善'
                  : ''
              }}</text
              ><u-icon name="arrow-down" color="#999999" size="32"></u-icon
            ></view>
          </view>
          <view v-if="!isWechat">
            <view class="text-sm text-dark leading-10">微信收款码</view>
            <view v-if="info.wechatStatus == 0 || info.wechatStatus == 3">
              <view
                class="flex items-center mb-2.5"
                v-if="info.wechatStatus == 3"
                ><u-icon
                  name="/static/icons/icon-message-tip.png"
                  size="24"
                ></u-icon
                ><text class="text-xs text-light ml-1.5">{{
                  info.wechatRemark
                }}</text></view
              >
              <view
                class="flex justify-center mb-5"
                @click="uploadPhoto('wechat')"
                v-if="info.wechatStatus == 0 && unWechatPhoto"
              >
                <image
                  class="w-32 h-32"
                  src="/static/icons/icon-photo-add.png"
                />
              </view>
              <view
                class="flex justify-center mb-5 relative"
                v-else
                @click="uploadPhoto('wechat')"
              >
                <view
                  class="text-center text-white text-sm w-32 h-10 leading-10 button-bg absolute bottom-0 z-10 rounded-b-xl"
                  >更换</view
                >
                <image
                  class="w-32 h-32 rounded-xl"
                  :src="info.wechtCodeUrlHttp"
                />
              </view>
            </view>
            <view class="flex justify-center mb-5" v-else>
              <image
                class="w-32 h-32 rounded-xl"
                :src="info.wechtCodeUrlHttp"
              />
            </view>
          </view>
        </view>
        <!--微信收款账户-->
        <!--银行卡收款账户-->
        <view :class="isBankcard ? 'border-b-gray' : ''">
          <view class="flex justify-between h-12 items-center">
            <view class="text-base text-dark">银行卡</view>
            <view
              class="flex justify-center items-center"
              @click="isBankcard = false"
              v-if="isBankcard"
              ><view
                class="bg-red-500 w-1 h-1 rounded-full mr-1.5"
                v-if="info.bankStatus == 3"
              ></view
              ><text class="text-light text-xs mx-1">{{
                info.bankStatus == 0
                  ? '待完善'
                  : info.bankStatus == 3
                  ? '待修改'
                  : info.bankStatus == 1
                  ? '待审核'
                  : info.bankStatus == 2
                  ? '已完善'
                  : ''
              }}</text
              ><u-icon name="arrow-right" color="#999999" size="32"></u-icon
            ></view>
            <view
              class="flex justify-center items-center"
              @click="isBankcard = true"
              v-else
              ><view
                class="bg-red-500 w-1 h-1 rounded-full mr-1.5"
                v-if="info.bankStatus == 3"
              ></view
              ><text class="text-light text-xs mx-1">{{
                info.bankStatus == 0
                  ? '待完善'
                  : info.bankStatus == 3
                  ? '待修改'
                  : info.bankStatus == 1
                  ? '待审核'
                  : info.bankStatus == 2
                  ? '已完善'
                  : ''
              }}</text
              ><u-icon name="arrow-down" color="#999999" size="32"></u-icon
            ></view>
          </view>
          <view v-if="!isBankcard">
            <view v-if="info.bankStatus == 0 || info.bankStatus == 3">
              <view class="flex items-center mb-2.5" v-if="info.bankStatus == 3"
                ><u-icon
                  name="/static/icons/icon-message-tip.png"
                  size="24"
                ></u-icon
                ><text class="text-xs text-light ml-1.5">{{
                  info.bankRemark
                }}</text></view
              >
              <u--form :model="info" errorType="toast">
                <u-form-item
                  prop="openBankStr"
                  class="border-b-grayLight"
                  @click="showCardbank = true"
                >
                  <u--input
                    v-model="info.openBankStr"
                    disabled
                    disabledColor="#ffffff"
                    placeholder="开户行"
                    border="none"
                    @input="changeDisabled"
                    style="text-indent: 20rpx"
                  ></u--input>
                  <u-icon
                    slot="right"
                    color="#999999"
                    name="arrow-right"
                  ></u-icon>
                </u-form-item>
                <u-form-item prop="branchBank">
                  <u--input
                    placeholder="开户支行"
                    clearable
                    v-model="info.branchBank"
                    border="bottom"
                    @input="changeDisabled"
                    class="py-2.5 text-base text-dark w-full"
                  ></u--input>
                </u-form-item>
                <u-form-item prop="bankNo">
                  <u--input
                    placeholder="银行卡号"
                    clearable
                    v-model="info.bankNo"
                    type="number"
                    border="bottom"
                    @input="changeDisabled"
                    class="py-2.5 text-base text-dark w-full"
                  ></u--input>
                </u-form-item>
              </u--form>
              <u-picker
                :show="showCardbank"
                :columns="[bankList]"
                keyName="bankName"
                itemHeight="84"
                title="请选择开户行"
                closeOnClickOverlay
                @cancel="showCardbank = false"
                @confirm="onBankConfirm"
              ></u-picker>
            </view>
            <view v-else>
              <view class="bg-gray rounded-lg py-2.5">
                <view class="mx-5">
                  <view class="text-base text-dark leading-6">{{
                    info.openBankStr
                  }}</view>
                  <view class="text-xs text-light leading-7">{{
                    info.branchBank
                  }}</view>
                  <view class="flex items-center" v-if="isCardNoShow">
                    <view class="text-dark text-lg leading-7"
                      >**** **** **** {{ info.bankNo.slice(-4) }}</view
                    >
                    <view class="ml-2.5" @click="isCardNoShow = false"
                      ><text class="custom-icon text-lg">&#xe648;</text></view
                    >
                  </view>
                  <view class="flex items-center" v-else>
                    <view class="text-dark text-lg leading-7">{{
                      info.bankNo
                    }}</view>
                    <view class="ml-2.5" @click="isCardNoShow = true"
                      ><u-icon name="eye" color="#333333" size="40"></u-icon
                    ></view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <!--银行卡收款账户-->

        <!--状态操作-->
        <view class="mx-10 mt-10 pb-6">
          <view
            class="w-full rounded-full leading-10 text-base h-10 text-center text-white bg-box-shadow"
            :class="isSubmit ? 'bg-primary' : 'bg-medium'"
            v-if="info.alipayAccountStatus == 0"
            @click="saveAccount"
            >提交</view
          >
          <view
            class="w-full rounded-full leading-10 text-base h-10 text-center text-white bg-box-shadow bg-primary"
            v-if="info.alipayAccountStatus != 0 && isSubmit"
            @click="saveAccount"
            >修改提交</view
          >
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getCashInfo, saveCashAccount } from '../../services/account';
import { postFile } from '../../../services/file';
import { getBankList } from '../../../services/user';

export default {
  data() {
    return {
      isLoading: true,
      info: {
        accountStatus: '0',
        alipayAccount: '',
        alipayAccountRemark: '',
        alipayAccountStatus: '0',
        alipayCodeRemark: '',
        alipayCodeStatus: '0',
        alipayCodeUrl: '',
        alipayCodeUrlHttp: '',
        bankNo: '',
        bankRemark: '',
        bankStatus: '0',
        branchBank: '',
        openBank: '',
        openBankStr: '',
        payeeName: '',
        wechatRemark: '',
        wechatStatus: '0',
        wechtCodeUrl: '',
        wechtCodeUrlHttp: '',
      },
      isCardNoShow: true,
      isRefuse: false,
      isSubmit: false,
      isShow: true,
      isAlipay: true,
      isWechat: true,
      isBankcard: true,
      showCardbank: false,
      unAlipayPhoto: true,
      unWechatPhoto: true,
      bankList: [],
      name: '',
    };
  },
  async created() {
    this._getCashInfo();
  },
  methods: {
    //判断返回上一页还是返回填写收款人内容页
    goBack() {
      if (!this.isShow && this.info.accountStatus == 0) {
        this.isShow = true;
      } else {
        uni.navigateBack();
      }
    },
    //判断是否可以提交数据
    changeDisabled() {
      if (
        this.info.alipayAccount != '' &&
        this.info.alipayCodeUrl != '' &&
        this.info.wechtCodeUrl != '' &&
        this.info.openBankStr != '' &&
        this.info.branchBank != '' &&
        this.info.bankNo != ''
      ) {
        this.isSubmit = true;
      } else {
        this.isSubmit = false;
      }
    },
    //确认选择开户行
    onBankConfirm(e) {
      this.showCardbank = false;
      const [curIndex] = e.indexs;
      const { bankCode, bankName } = this.bankList[curIndex];
      this.info.openBankStr = bankName;
      this.info.openBank = bankCode;
    },
    //提交保存
    async saveAccount() {
      try {
        //判断是否可以提交数据
        if (!this.isSubmit) {
          uni.$u.toast('请填写全部收款信息后，再提交');
          return;
        }
        //判断提交数据是否全部已填 => 上一句已判断
        this.info.accountStatus = this.info.accountStatus.toString();
        this.info.alipayAccountStatus =
          this.info.alipayAccountStatus.toString();
        this.info.alipayCodeStatus = this.info.alipayCodeStatus.toString();
        this.info.bankStatus = this.info.bankStatus.toString();
        this.info.wechatStatus = this.info.wechatStatus.toString();
        //console.log(this.info);
        //判断支付宝账号格式正则 => 同时支持手机号和邮箱
        var reg =
          /^(?:1[3-9]\d{9}|[a-zA-Z\d._-]*\@[a-zA-Z\d.-]{1,10}\.[a-zA-Z\d]{1,20})$/;
        if (!reg.test(this.info.alipayAccount)) {
          uni.showToast({
            title: '请输入正确的支付宝账号',
            icon: 'none',
          });
          return;
        }
        const { code, data } = await saveCashAccount(this.info);
        if (code != 200) return;
        uni.$u.toast('数据已提交');
        //编辑：提交成功后隐藏提交按钮
        this.isSubmit = false;
        setTimeout(() => {
          this._getCashInfo();
        }, 500);
      } catch (error) {
        console.error(error);
      }
    },
    //上传二维码
    uploadPhoto(type) {
      uni.chooseImage({
        count: 1, //默认9
        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
        success: async ({ tempFiles, tempFilePaths }) => {
          // #ifdef H5
          const file = tempFiles[0];
          // #endif
          // #ifndef H5
          const file = tempFilePaths[0];
          // #endif
          const { code, data } = await postFile(file, 'pay');
          if (code != 200) return;
          switch (type) {
            case 'alipay':
              this.info.alipayCodeUrlHttp = data.httpUrl;
              this.info.alipayCodeUrl = data.path;
              this.unAlipayPhoto = false;
              break;
            case 'wechat':
              this.info.wechtCodeUrlHttp = data.httpUrl;
              this.info.wechtCodeUrl = data.path;
              this.unWechatPhoto = false;
              break;
          }
        },
      });
    },
    //获取银行列表
    async _getBankList() {
      const { code, data } = await getBankList();
      if (code != 200) return;
      this.bankList = data;
    },
    //获取用户的提现信息
    async _getCashInfo() {
      this.isShow = true;
      const { code, data } = await getCashInfo();
      if (code != 200) return;
      this.isLoading = false;
      this.isShow = data.accountStatus == 0 ? true : false;
      if (data.accountStatus != 0) {
        this.info = data;
      }
      //console.log(data);
      if (
        data.alipayAccountStatus == 3 ||
        data.alipayCodeStatus == 3 ||
        data.bankStatus == 3 ||
        data.wechatStatus == 3
      ) {
        this.isSubmit = true;
      }
      this._getBankList();
    },
    //保存收款人姓名
    async submitTo() {
      if (this.info.payeeName == '') {
        return;
      }
      var regName = /^[\u4e00-\u9fa5]{2,4}$/; //2-4位中文姓名正则校验
      if (!regName.test(this.info.payeeName)) {
        uni.showToast({
          title: '请输入正确的收款人姓名',
          icon: 'none',
        });
        return;
      }
      this.isShow = false;
    },
  },
};
</script>

<style></style>
